<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>优惠券</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../css/aui.css">
     <link rel="stylesheet" href="../../css/common.css">
         <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
     <script language="JavaScript" src="../../script/common.js"></script>
    <style>
        .bgcolor-white{
            background-color: #fff;
        }
        .aui-tab .aui-active{
            color:#e02e24;
            border-bottom: 2px solid #e02e24;
        }
        .couponlist{
            margin: 0.2rem;
        }
        .couponlist .coupon-item{

            display: flex;
            justify-content: space-between;

         }
        .coupon-item .amount-title{
            font-size: 0.6rem;
            padding-left: 0.4rem;
        }
        .coupon-item .amount-price{
            text-align: center;
            font-size: 0.8rem;
            line-height: 2rem;
        }
        .coupon-item .item-descrip{
            font-size: 0.6rem;
         }
        .item-descrip .coupon-cond1{
            color:#757575;
        }
        .item-descrip .coupon-cond2{
            color: #000;
            font-size: 0.7rem;
        }
        .item-descrip .coupon-exp{
            color:#757575;
        }
        .item-descrip .exp-flag{
            text-align: right;
            color: #757575;
        }
        .border-used{
            border-left: 3px solid #d9d9d9;
            background-color: #fafafa;

        }
        .border-noused{
            border-left: 3px solid #00acc1;
            background-color: #fff;
        }
        .border-noused .exp-flag{
            color: #e02e24;
        }
    </style>
</head>
<body>

<div class="aui-content" id="coupon-box">

    <div class="couponlist">
        <ul>
            <li class="coupon-item border-used" :class="licss[item.status]" v-for="item in couponlist" :key="item.id">
                <div class="item-amount">
                    <div class="amount-title">{{item.title}}</div>
                    <div class="amount-price">¥{{item.amount/100}}</div>
                </div>
                <div class="item-descrip">
                    <div class="exp-flag">{{item.status ? '已使用/已过期':'未使用'}}</div>

                    <div class="coupon-cond1" v-if="item.coupon_type=='cash'">满{{item.used_minamount/100}}减{{item.amount/100}}</div>
                    <div class="coupon-cond1" v-else-if="item.coupon_type=='discount'">满{{item.used_minamount/100}}打{{item.amount}}折</div>
                    <div class="coupon-cond1" v-else-if="item.coupon_type=='zerobuy'">小于{{item.amount/100}}免单</div>

                    <div class="coupon-cond2" v-if="item.platform=='web'">仅限微信内使用</div>
                    <div class="coupon-cond2" v-else-if="item.platform=='app'">仅限APP内使用</div>
                    <div class="coupon-cond2" v-else="item.platform=='all'">通用劵</div>
                    <div class="coupon-exp">{{item.startdt_fmt}}-{{item.enddt_fmt}}</div>

                </div>
             </li>

        </ul>
    </div>
</div>

<script language="javascript">


    var pvm = new Vue({
            el: '#coupon-box',
            data: {
                licss: {
                0: 'border-noused',
                1: 'border-used'
                },
                couponlist:[],
                page:1,
                totalpage:1,
                retback:true,
                status:0,
                token:'',

             },
            methods:{

                 getcouponlist:function () {
                    if(pvm.page>pvm.totalpage || !pvm.retback){
                        return;
                    }
                    pvm.retback =false;
                    $page.get_data('/api/member/getCouponlist','post',{page:this.page,status:this.status,token:this.token},function (ret) {
                        pvm.totalpage = ret.data.totalpage;
                        pvm.page = pvm.page+1;
                        pvm.retback = true;
                        if(ret.errno!==1000){
                          return;
                        }
                        ret.data.list.forEach(function(el){
                            pvm.couponlist.push(el);
                        });
                    });
                }
            }
        }
    );
    apiready=function(){
      pvm.token = $api.getStorage('token');
      var pageParam = api.pageParam;
      pvm.status = pageParam.status;

      $page.init();
          pvm.getcouponlist();
       $page.pullup(function (ret) {
          pvm.getcouponlist();
      });

    }

    </script>
</body>
</html>
